<template>
  <van-overlay
    :show="main.forget_pc"
    :lock-scroll="false"
    z-index="100"
    class="flex justify-center items-center"
  >
    <div>
      <div class="w-96">
        <div v-if="step === 1" class="bg-[#2f4553] text-white p-8 rounded-lg">
          <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-bold text-center w-full">
              {{ $t("layer.login.ChangePassword") }}
            </h2>
            <button class="text-gray-400 hover:text-white">
              <van-icon name="close" class="close" @click="forgotClick" />
            </button>
          </div>
          <div class="mb-4">
            <label class="block mb-2">
              {{ $t("layer.login.Email") }}
            </label>
            <div class="flex items-center mb-4">
              <!-- <select class="bg-[#0f212e] text-white p-2 rounded-l-md">
                    <option>+86</option>
                  </select> -->
              <input
                type="text"
                placeholder=""
                v-model="email"
                autocomplete="off"
                @blur="validateEmail"
                class="bg-[#0f212e] text-white p-2 w-full rounded-r-md"
              />
            </div>
            <div class="text-sm mb-2 h-[12px]">
              <span v-show="emailError.length > 0" class="text-red-500">
                {{ emailError }}
              </span>
            </div>
          </div>
          <button
            @click="nextStep"
            class="bg-green-500 text-white p-2 w-full rounded-md"
          >
            {{ $t("layer.wallet.nextstep") }}
          </button>
        </div>
        <div v-if="step === 2" class="bg-[#2f4553] text-white p-8 rounded-lg">
          <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-bold text-center w-full">
              {{ $t("layer.login.ChangePassword") }}
            </h2>
            <button class="text-gray-400 hover:text-white">
              <van-icon name="close" class="close" @click="closeLogin" />
            </button>
          </div>
          <div class="mb-4">
            <div class="mb-4">
              <label class="block mb-2">
                {{ $t("layer.login.EmailCode") }}
              </label>
              <input
                type=""
                placeholder=""
                class="bg-[#0f212e] text-white p-2 w-full rounded-md"
                v-model="emilCode"
                autocomplete="off"
              />
              <div v-if="showCodeMsg" class="text-red-500 text-sm mb-2">
                {{ $t("page.setting.emilCodeMsg") }}
              </div>
            </div>

            <div class="mb-4">
              <label class="block mb-2">
                {{ $t("page.setting.newpsw") }}
              </label>
              <input
                type="password"
                placeholder=""
                autocomplete="off"
                class="bg-[#0f212e] text-white p-2 w-full rounded-md"
                v-model="newPassword"
                @input="validatePassword"
              />
              <ul class="text-sm mt-2">
                <li
                  class="flex items-center"
                  :class="hasMinLength ? '' : 'text-red-500'"
                >
                  {{ hasMinLength ? "✅" : "❌" }}

                  {{ $t("layer.login.errcode4") }}
                </li>
              </ul>
            </div>
            <div>
              <label class="block mb-2">
                {{ $t("page.setting.conformpsw") }}
              </label>
              <input
                type="password"
                placeholder=""
                class="bg-[#0f212e] text-white p-2 w-full rounded-md"
                v-model="confirmPassword"
                autocomplete="off"
                @input="validateConfirmPassword"
              />
              <ul class="text-sm mt-2">
                <li
                  class="flex items-center"
                  :class="passwordsMatch ? '' : 'text-red-500'"
                >
                  {{ passwordsMatch ? "✅" : "❌" }}

                  {{ $t("layer.login.errcode5") }}
                </li>
              </ul>
            </div>
          </div>
          <button
            @click="complete"
            class="bg-green-500 text-white p-2 w-full rounded-md"
          >
            {{ $t("page.setting.Submit") }}
          </button>
        </div>
      </div>
    </div>
  </van-overlay>
</template>

<script setup>
import { postUserEmiaSendl, postUserForgoPassword } from "@/api/user";
import { ElNotification } from "element-plus";
import { computed, ref } from "vue";
import { useI18n } from "vue-i18n";
import { mainAct } from "@/store/activeda";

const { t } = useI18n();
const main = mainAct();

const step = ref(1);
const email = ref("");
const emailError = ref("");
const emilCode = ref("");
const newPassword = ref("");
const confirmPassword = ref("");
const showCodeMsg = ref(false);
const phoneNumberError = ref(false);
const phoneNumber = ref("");
const verificationCodeError = ref(false);
const verificationCode = ref("");
const password = ref("");

const passwordCriteria = ref({
  upperLower: false,
  number: false,
  length: false
});

const hasMinLength = computed(() => newPassword.value.length >= 6);

const passwordsMatch = computed(
  () => newPassword.value === confirmPassword.value
);

const validateEmail = () => {
  const emailPattern = /^[a-zA-Z0-9_.%+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
  emailError.value = emailPattern.test(email.value)
    ? ""
    : t("layer.login.EmailErrcode");
};

const validatePassword = () => {
  passwordCriteria.value.length = password.value.length >= 6;
};

const nextStep = async () => {
  validateEmail();
  if (emailError.value.length) {
  } else {
    phoneNumberError.value = !phoneNumber.value;
    verificationCodeError.value = !verificationCode.value;

    const res = await postUserEmiaSendl({
      email: email.value
    });

    if (res.errno == 0) {
      step.value = 2;
    }
  }
};

const hasNumber = computed(
  () => /\d/.test(newPassword.value) && newPassword.value.length >= 6
);

const complete = async () => {
  if (!emilCode.value.length) {
    showCodeMsg.value = true;
    return;
  }
  showCodeMsg.value = false;
  if (hasNumber.value && hasMinLength.value && passwordsMatch.value) {
    const res = await postUserForgoPassword({
      code: emilCode.value,
      password: newPassword.value,
      password_confirm: confirmPassword.value
    });
    if (res.errno == 0) {
      main.closeForget();
      step.value = 1;
      email.value = "";
      emilCode.value = "";
      newPassword.value = "";
      confirmPassword.value = "";
      let msg = t("page.setting.alterPwd");
      ElNotification({
        position: "top-left",
        zIndex: 1004,
        title: "Success",
        message: msg,
        type: "success"
      });
    }
  }
};

const forgotClick = () => {
  main.closeForget();
  closeLogin();
};

const closeLogin = () => {
  step.value = 1;
  verificationCode.value = "";
  newPassword.value = "";
  confirmPassword.value = "";
  email.value = "";
  phoneNumber.value = "";
  emilCode.value = "";
};
</script>

<style scoped></style>
